import React, { Component } from 'react';
import axios from 'axios'
import { Button } from 'antd';
import { PlusOutlined,DownloadOutlined,HeartOutlined,ShareAltOutlined } from '@ant-design/icons';
import "./index.css"
export default class MvList extends Component {
  state = {
    data: [],
    url: ''
  }
  componentDidMount() {
    // 获取url地址并截取id
    var test = window.location.href.split('/').pop()
    // 发送请求
    axios.get(`http://iwenwiki.com:3000/mv/detail?mvid=${test}`).then(
      //请求成功后，
      response => {
        // 数据请求成功后App更新状态(loading页面消失，数据页面出现)
        this.setState({ data: response.data.data })
        this.setState({ url: response.data.data.brs[240] })
      },
      errer => {
        //数据请求失败后App更新状态
        console.log('没有数据', errer);
      }
    )
  }
  render() {
    const mvurl = this.state.url
    return (
      <div className='mvlist'>
        <div className="inner">
          <div className="header">
            <div>
              <h3>推荐MV</h3>
              <Button shape="round" type='primary'>
                <PlusOutlined />
                收藏
              </Button>
            </div>
            <img src={this.state.data.cover} alt="" />
            <div className='star'>
              <p>名称：<span>{this.state.data.name}</span></p>
              <p>歌手：<span className='singer'>{this.state.data.artistName}</span></p>
              <p>发行事件：<span>{this.state.data.publishTime}</span></p>
            </div>
          </div>
          <video width={1000} src={mvurl} controls></video>
          <div className='details'>
            <h3>详情</h3>
            <div className='btall'>
              <Button shape="round" type='ghost'>
              <HeartOutlined />
                点赞（{this.state.data.likeCount}）
              </Button>
              <Button shape="round" type='ghost'>
                <PlusOutlined />
                收藏（{this.state.data.shareCount}）
              </Button>
              <Button shape="round" type='ghost'>
              <ShareAltOutlined />
                分享（{this.state.data.subCount}）
              </Button>
              <Button shape="round" type='ghost'>
              <DownloadOutlined />
                下载（{this.state.data.commentCount}）
              </Button>
            </div>
            <p>{this.state.data.desc}</p>
          </div>
        </div>

      </div>
    );
  }
}
